<template>
    <div>
        <div class="car-title">
            <div class="car-top">
                <h4>购物车</h4>
                <span @click="show" v-show="goodslist.length">编辑</span>
            </div>

            <div class="car-bottom">
                <p v-for="(ite,ind) in tab" :key="ind" @click="handlactive(ind)" :class="color==ind?'active':''">
                    {{ite}}
                </p>
            </div>
        </div>

        <div class="sction">
            
            <div class="bigbox" v-if="shoppshow">
                 <!-- 一个商品 -->
                <div class="car-content" v-for="(item,index) in goodslist" :key="index">
                    <div class="car-cont">
                        <div>
                            <van-checkbox v-model="item.checked"></van-checkbox>
                        </div>
                        
                        <img :src="url+item.goodsImg" alt="">
                        <div class="num-total">
                            <p>{{item.goodsName}}</p>
                            <div>
                                <div class="moany">
                                    <i style="margin-right:5px">¥</i>
                                    <span>{{item.goodsPrice}}</span>
                                </div>
                                <!-- 商品的数量   与状态机双向绑定  改变任一方 另一方页随着改变-->
                                <van-stepper v-model="item.isIcon" integer />
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 当没有商品是显示图片 -->
                <div class="null_goods" v-if="!goodslist.length">
                    <img src="../assets/img/nullgoods.png" alt="">
                    <p>购物车空空如也~</p>
                </div>

            </div>
            <!-- 需求清单 -->
            <div class="needlist" v-else>
               <img src="../assets/img/nullgoods.png" alt="">
               <p>需求清单空空如也~</p>
            </div>

            <div class="line">
                <p>为你推荐</p>
            </div>
            <Hometab2/>
        </div>
        



        <div class="footer">
            <!-- 结算 -->
            <div class="account">
                <ul  class="account-content">
                    <li class="checkbox" style="margin-left:8px;font-size:13px">
                        <!-- 全选框 -->
                        <van-checkbox v-model="allInfo.allchecked" @click="clic">全选</van-checkbox>
                    </li>
                    <li class="pay_moany" v-if="isshow" style="margin-left:8px;">
                        <div class="total">
                            <div class="cart-mone" style="color:#F22E00">合计￥<span v-if="!allInfo.allprice">0</span><span v-else>{{allInfo.allprice}}</span></div> 
                            <div class="">
                                不含运费 <span class="" style="color: rgb(242, 46, 0);">共减￥0</span> 
                                <span style="color: rgb(242, 46, 0);">优惠明细
                                <van-icon name="arrow-up" />
                                </span>
                            </div>
                        </div> 
                        <div  class="account_moany">
                            <button class="common-button-orange " style="color:#fff" @click="checkout">结算</button>
                        </div>
                    </li>

                   <!-- 删除按钮 -->
                   <li class="detele" v-else>
                       <button @click="detele">删除</button>
                   </li>
                </ul>
            </div>
            <Footer/>
        </div>
    </div>
</template>

<script>
import request from '../utils/request'
import Footer from '../components/Footer.vue'
import Hometab2 from '../views/Hometab2.vue'
    export default {
        //挂载组件
        components: {
            Footer,
            Hometab2,
        },
        //数据包
        data() {
            return {
                tab:['购物车','需求清单'],
                color:0,
                isshow:true,
                shoppshow:true,
                url:'https://www.160dyf.com',
            }
        },
        // 计算属性
        computed: {
            goodslist() {
                return this.$store.state.cart.goodscarlist   //从状态机中拿取到的购物车数据
            },
            allInfo(){
                return this.$store.getters['cart/allInfo']  //获取到状态机getters中的数据
            },
        },
        //方法事件
        methods: {
            clic(){   // 全选控制单选事件
                let bool=this.allInfo.allchecked
                this.$store.commit('cart/allchecked' ,bool)
                this.allchecked=this.allInfo.allchecked
            },
            handlactive(index) {
                this.color=index
                this.shoppshow=!this.shoppshow
            },
            show(){
                this.isshow=!this.isshow
                
            },
            detele(){
               this.$store.commit('cart/detelechecked')
            },
            checkout(){
                console.log(111);
                this.$router.push('/checkout1')
            }
        },
        //创建周期
        created () {
           request.get('/node/stu').then(res=>{
                console.log(res);
            })
        },
       
    }
</script>

<style src="../assets/css/shoppcar.css" scoped>
.van-submit-bar{
    position: static !important;

}
</style>